<template>
    <div class="orh-trees">
        <div class="orh-trees-title" v-show="titleStatus">
            <Breadcrumb>
                <BreadcrumbItem v-for="(item,ind) in title" :key="ind">{{ item }}</BreadcrumbItem>
            </Breadcrumb>
        </div>
        <div class="orh-trees-tree" v-if="!hideTrees">
            <div class="cont_heads" v-if="treesHead">
                <h4 style="font-size:14px;font-weight:700;color:#222">{{ treesHead.title }}</h4>
                <Button type="primary" size="small" @click="subMenu" v-if="treesHead.button">{{ treesHead.button_text }}</Button>
            </div>
            <div class="tresscon">
                <slot name="trees"></slot>
            </div>
        </div>
        <div class="orh-trees-body" :style="{left: hideTrees?'0':'200px'}">
            <div class="orh-trees-body-tags" v-if="$slots.tags || tags">
                <div v-if="!tags" style="width: 100%;height: 100%;"><slot name="tags"></slot></div>
                <Tabs v-if="tags" :animated="false" :name="3" size="small" @on-click="tagsClick">
                    <TabPane v-for="(el, index) in tags" :key="index" :name="el.value" :label="el.label"></TabPane>
                </Tabs>
            </div>
            <div class="orh-trees-body-content" :style="{top: $slots.tags || tags?'40px':'0'}">
                <slot name="content"></slot>
            </div>
        </div>
        <slot name="others"></slot>
    </div>
</template>

<script>
export default {
    data() {
        return {
            title: []
        }
    },
    props: {
        titleStatus: {
            type: Boolean,
            default: false
        },
        tags: {
            type: [Boolean, Array],
            default: false
        },
        hideTrees: {
            type: Boolean,
            default: false
        },
        treesHead: Object
    },
    methods: {
        
        /************************************************************
         * 
         * 树形按钮点击事件
         * 
         ************************************************************/
        subMenu() {
            this.$emit('on-submenu');
        },
        
        /************************************************************
         * 
         * 标签点击事件
         * @param   {name}             标签值[String]
         * 
         ************************************************************/
        tagsClick (name) {
            this.$emit('on-tags', name);
        }
    },
    created() {
        let route = this.$route.fullPath.split('/')
        let modules = this.$modules
        let arr = []
        let moditem = modules.find(item=> item.path == route[1])
        arr.push(moditem.alias[this.lang])
        if(moditem.children && moditem.children.length) {
            let rest = moditem.children.find(item=> item.path == route[2])
            arr.push(rest.alias[this.lang])
        }
        this.title = arr
    }
};
</script>

<style lang="less">
.orh-trees {
    width: 100%;
    height: 100%;
    position: relative;
    .orh-trees-title {
        position: absolute;
        left: 0; right: 0;
        top: 0;
        height: 40px;
        border-bottom: 1px solid #e9eaec;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 33px;
    }
    .orh-trees-tree {
        position: absolute;
        left: 0;
        top: 40px;
        bottom: 0;
        width: 200px;
        border-right: 1px solid #e9eaec;
        overflow: auto;
        .cont_heads {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 40px;
            padding: 0 15px;
            border-bottom: 1px solid #e9eaec;
            .right_handels {
                width: auto;
                display: flex;
                justify-content: flex-end;
            }
        }
        .tresscon {
            padding: 15px 17px;
        }
    }
    .orh-trees-body {
        position: absolute;
        top: 40px;
        right: 0;
        bottom: 0;
        .orh-trees-body-heads {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 40px;
            padding: 0 15px;
            border-bottom: 1px solid #e9eaec;
            .right_handels {
                width: auto;
                display: flex;
                justify-content: flex-end;
            }
        }
        .orh-trees-body-tags {
            height: 40px;
            border-bottom: 1px solid #e9eaec;
        }
        .orh-trees-body-content {
            position: absolute;
            bottom: 0; left: 0; right:0;
            overflow: hidden;
        }
        .icon_handel {
            cursor: pointer;
            margin-right: 20px;
        }
        &-custom {
            width: 100%;
        }
    }
    
    .ivu-tabs-nav-scroll {
        height: 41px;
        line-height: 25px;
    }
    .ivu-tabs-nav-scroll-disabled {
        display: none!important;
    }
    .ivu-tabs-nav-scrollable {
        height: 41px;
        padding: 0 20px!important;
        .ivu-tabs-nav-prev {
            width: 20px;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center
        }
        .ivu-tabs-nav-next {
            width: 20px;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center
        }
    }
}
</style>
